<template>
  <nav class="menu-container">
    <router-link
      :exact="item.exact"
      :to="item.link"
      v-for="item in list"
      :key="item.id"
      active-class="selected"
      exact-active-class=""
    >
      <Icon :type="item.type" />
      <span>{{ item.text }}</span>
    </router-link>
  </nav>
</template>

<script>
import Icon from "@/components/Icon";
export default {
  components: { Icon },
  data: () => ({
    list: [
      { id: 0, exact: true, link: {name:'home'}, type: "home", text: "首页" },
      {
        exact: false, // 激活状态是否要精确匹配
        id: 1,
        link: "/blog",
        type: "blog",
        text: "文章"
      },
      { id: 2, exact: true, link:  {name:'about'}, type: "about", text: "关于我" },
      { id: 3, exact: true, link:  {name:'project'}, type: "code", text: "项目效果" },
      { id: 4, exact: true, link:  {name:'message'}, type: "chat", text: "留言板" },
    ],
  })
};
</script>

<style lang='less' scoped>
@import "~@/assets/style/var.less";
.menu-container {
  color: @gray;
  margin: 14px 0;
  a {
    padding: 0 50px;
    display: block;
    display: flex;
    align-items: center;
    height: 45px;
    .icon {
      width: 24px;
    }
    &:hover {
      color: #fff;
    }
    &.selected {
      background: darken(@words, 3%);
    }
  }
}
</style>
